jsm-mall-front/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>
          <template v-for="(item, index) in payData">
            <zj-form-module
              :key="index"
              :title="`支付费用${index + 1} 【支付订单号：${item.orderId}】`"
              :form-data="payData[index]"
              :form-items="
                [formItemsL1, formItems(item)][!!~[1, 2, 3].indexOf(workOrderType) ? 0 : workOrderType == 4 ? 1 : 0]
              "
            >
              <div v-if="item.examineStatus === 'FAIL'" style="text-align: right">
                <el-button size="mini" type="danger" plain @click="enginMaterialCancelFun(item)">取消申请</el-button>
              </div>
            </zj-form-module>
          </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, enginMaterialDetailWorker, enginMaterialCancel } from '@/api/workOrderPool.js'
import { orderBaseDetail } from '@/api/workOrderPool.js'
import { number } from 'echarts'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    workOrderType: {
      type: Number,
      default: 1 // 1普通工单, 4维保工单
    }
  },
  data() {
    return {
      payData: [],
      orderBaseDetail: {}
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.getxiangqing()
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    formItemsL1() {
      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: '11%' }}
                contentStyle={{ width: '22.3%' }}
              >
                <el-descriptions-item label="网点名称">{`(${formData.websitId})${formData.websitName}`}</el-descriptions-item>
                <el-descriptions-item label="工单号">{formData.workerOrderId}</el-descriptions-item>
                <el-descriptions-item label="工程师编号">
                  {formData.workerNumber || formData.workerId}
                </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="支付方式">
                  {{ WECHAT: '微信支付', LINE: '线下支付', EXAMINE: '审批', GREE: '格力支付' }[formData.payType] ||
                    '微信支付'}
                </el-descriptions-item>
                <el-descriptions-item label="客户名称">{formData.pgOrderBase.userName}</el-descriptions-item>
                <el-descriptions-item label="电话号码">{formData.userMobile}</el-descriptions-item>
                <el-descriptions-item label="支付状态">
                  {{ CANCEL: '取消', WAIT: '待支付', PAID: '已支付' }[formData.payStatus]}
                </el-descriptions-item>
                <el-descriptions-item label="支付总金额">{this.toFixed(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-item label="分账状态">
                  {{ WAIT: '待结算', OK: '完成', YC: '异常结算', LINE: '线下结算' }[formData.settlementStatus]}
                </el-descriptions-item>
                {this?.workOrderType == 4
                  ? [
                      <el-descriptions-item label=""></el-descriptions-item>,
                      <el-descriptions-item label="审批状态">
                        {{ WAIT: '待审', OK: '审批', FAIL: '驳回', NO: '取消' }[formData.examineStatus] || ''}
                      </el-descriptions-item>,
                      <el-descriptions-item label="审批人">{formData.examineName}</el-descriptions-item>,
                      <el-descriptions-item label="审批时间">{formData.examineTime}</el-descriptions-item>
                    ]
                  : null}
              </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'
                    },
                    render: (h, { row, column }) => {
                      return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '数量',
                      prop: 'num'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '费用金额',
                      prop: 'totalAmount'
                    },
                    render: (h, { row, column }) => {
                      return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                    }
                  }
                  // ...(() => {
                  //   if (!!~[1, 2, 3].indexOf(this?.workOrderType)) {
                  //     return [
                  //       {
                  //         columnAttributes: {
                  //           label: '师傅分账金额',
                  //           prop: 'workerAmount'
                  //         },
                  //         render: (h, { row, column }) => {
                  //           return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                  //         }
                  //       },
                  //       {
                  //         columnAttributes: {
                  //           label: '师傅手续费',
                  //           prop: 'workerProceAmount'
                  //         },
                  //         render: (h, { row, column }) => {
                  //           return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                  //         }
                  //       },
                  //       {
                  //         columnAttributes: {
                  //           label: '网点分账金额',
                  //           prop: 'websitAmount'
                  //         },
                  //         render: (h, { row, column }) => {
                  //           return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                  //         }
                  //       },
                  //       {
                  //         columnAttributes: {
                  //           label: '网点手续费',
                  //           prop: 'websitProceAmount'
                  //         },
                  //         render: (h, { row, column }) => {
                  //           return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                  //         }
                  //       }
                  //     ]
                  //   }
                  //   return []
                  // })()
                ]}
                table-data={
                  [formData.workerOrderItems, formData.rpMaterialOrderItems][
                    !!~[1, 2, 3].indexOf(this?.workOrderType) ? 0 : this?.workOrderType == 4 ? 1 : 0
                  ]
                }
              />
            )
          }
        },
        {
          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'
                    },
                    render: (h, { row }) => {
                      return <div>{{ M: '辅材', P: '配件' }[row.goodsType]}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '交易金额',
                      prop: 'totalAmount'
                    },
                    render: (h, { row, column }) => {
                      return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '交易状态',
                      prop: 'payStatus'
                    },
                    render: (h, { row }) => {
                      return <div>{{ CANCEL: '取消', WAIT: '待支付', PAID: '已支付' }[row.payStatus]}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '交易时间',
                      prop: 'payTime'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '创建时间',
                      prop: 'createTime'
                    }
                  }
                ]}
                table-data={[formData]}
              />
            )
          }
        },
        {
          isShow: this.orderBaseDetail.orderType == 'REPAIR',
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '配件信息'
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <zj-table
                columns={[
                  {
                    columnAttributes: {
                      label: '维修标识',
                      prop: 'repairFlag'
                    },
                    render: (h, { row }) => {
                      return <div>{{ INNER: '保内', OUTSIDE: '保外' }[row.repairFlag]}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '旧配件编号',
                      prop: 'oldPartsNumber'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '旧配件名称',
                      prop: 'oldPartsName'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '新配件编号',
                      prop: 'goodsCode'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '新配件名称',
                      prop: 'goodsName'
                    }
                  }
                ]}
                table-data={formData.workerOrderItems || []}
              />
            )
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '其它费用表',
            'label-width': '90px'
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <zj-table
                columns={[
                  {
                    columnAttributes: {
                      label: '费用名称',
                      prop: 'amountName'
                    },
                    render: (h, { row, column }) => {
                      return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '费用金额',
                      prop: 'normAmount'
                    },
                    render: (h, { row, column }) => {
                      return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                    }
                  }
                  // {
                  //   columnAttributes: {
                  //     label: '师傅分账金额',
                  //     prop: 'sffzje'
                  //   },
                  //   render: (h, { row, column }) => {
                  //     return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                  //   }
                  // },
                  // {
                  //   columnAttributes: {
                  //     label: '师傅手续费',
                  //     prop: 'sfsxf'
                  //   },
                  //   render: (h, { row, column }) => {
                  //     return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                  //   }
                  // }
                ]}
                table-data={formData.gengduofeiyong || []}
              />
            )
          }
        }
      ]
    }
  },
  methods: {
    formItems(itemData) {
      return [
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '基本信息'
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <el-descriptions
                border
                title=""
                column={2}
                colon={false}
                labelStyle={{ width: '13%' }}
                contentStyle={{ width: '37%' }}
              >
                <el-descriptions-item label="申请单号">{formData.orderId}</el-descriptions-item>
                <el-descriptions-item label="项目名称">{formData.rpProjectRepairName}</el-descriptions-item>
                <el-descriptions-item label="工单单号">{formData.workerOrderId}</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.pgOrderBase.address}</el-descriptions-item>
                <el-descriptions-item label="创单人">{formData.pgOrderBase.createBy}</el-descriptions-item>
                <el-descriptions-item label="创单人电话">{formData.pgOrderBase.createMobile}</el-descriptions-item>
                <el-descriptions-item label="创单时间">{formData.pgOrderBase.createTime}</el-descriptions-item>
                <el-descriptions-item label="工单类型">{formData.orderSmallTypeText}</el-descriptions-item>
                <el-descriptions-item label="网点名称">{formData.websitName}</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="申请时间">{formData.createTime}</el-descriptions-item>
                <el-descriptions-item label="包含全部费用">
                  {{ YES: '是', NO: '否' }[formData.isAllFee]}
                </el-descriptions-item>

                {formData.isAllFee == 'NO' || formData.payType == 'WECHAT' || formData.payType == 'LINE' ? (
                  <el-descriptions-item label="费用支付方式">
                    {{ EXAMINE: '审批后结算', SITE: '现场支付' }[formData.feePayMethod]}
                  </el-descriptions-item>
                ) : null}

                {(formData.isAllFee == 'NO' || formData.payType == 'WECHAT') && formData.feePayMethod == 'EXAMINE'
                  ? [
                      <el-descriptions-item label="费用单状态">
                        {
                          { WAIT: '待审', OK: '通过', FAIL: '驳回', PAID: '现场支付', NO: '取消', NO_PAID: '未支付' }[
                            formData.examineStatus
                          ]
                        }
                      </el-descriptions-item>,
                      <el-descriptions-item label="审批人">{formData.examineName}</el-descriptions-item>,
                      <el-descriptions-item label="审批时间">{formData.examineTime}</el-descriptions-item>,
                      <el-descriptions-item label="取消人">{formData.cancelName}</el-descriptions-item>,
                      <el-descriptions-item label="取消时间">{formData.cancelTime}</el-descriptions-item>
                    ]
                  : null}

                {formData.payType == 'LINE' && formData.feePayMethod == 'EXAMINE'
                  ? [
                      <el-descriptions-item label="结算状态">
                        {{ WAIT: '待结算', OVER: '已结算' }[formData.status]}
                      </el-descriptions-item>,
                      <el-descriptions-item label="结算人">{formData.settleName}</el-descriptions-item>,
                      <el-descriptions-item label="结算时间">{formData.settleTime}</el-descriptions-item>
                    ]
                  : null}
              </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: 'chargeType'
                    },
                    render: (h, { row, column, index }) => {
                      return (
                        <div style="padding-left:10px">
                          {{ MCC: '辅材物料', ACC: '配件物料', SERV: '服务收费' }[row.chargeType]}
                        </div>
                      )
                    }
                  },
                  {
                    columnAttributes: {
                      label: '单价',
                      prop: 'goodsAmount'
                    },
                    render: (h, { row, column }) => {
                      return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '数量',
                      prop: 'num'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '费用金额',
                      prop: 'totalAmount'
                    },
                    render: (h, { row, column }) => {
                      return <div>{this.toFixed(row[column.columnAttributes.prop])}</div>
                    }
                  }
                ]}
                table-data={formData.rpMaterialOrderItems}
              />
            )
          }
        },
        {
          md: 8,
          isShow: itemData.goodsType == 'M',
          name: 'slot-component',
          formItemAttributes: {
            label: '辅材费用合计'
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <span>
                {[
                  0,
                  0,
                  0,
                  ...formData.rpMaterialOrderItems
                    .filter(item => item.chargeType == 'MCC')
                    .map(item => item.totalAmount)
                ]
                  .reduce(function (prev, curr, idx, arr) {
                    return prev + curr
                  })
                  .toFixed(2)}
              </span>
            )
          }
        },
        {
          md: 8,
          isShow: itemData.goodsType == 'P',
          name: 'slot-component',
          formItemAttributes: {
            label: '配件费用合计'
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <span>
                {[
                  0,
                  0,
                  0,
                  ...formData.rpMaterialOrderItems
                    .filter(item => item.chargeType == 'ACC')
                    .map(item => item.totalAmount)
                ]
                  .reduce(function (prev, curr, idx, arr) {
                    return prev + curr
                  })
                  .toFixed(2)}
              </span>
            )
          }
        },
        {
          md: 8,
          name: 'slot-component',
          formItemAttributes: {
            label: '服务收费费用合计'
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <span>
                {[
                  0,
                  0,
                  0,
                  ...formData.rpMaterialOrderItems
                    .filter(item => item.chargeType == 'SERV')
                    .map(item => item.totalAmount)
                ]
                  .reduce(function (prev, curr, idx, arr) {
                    return prev + curr
                  })
                  .toFixed(2)}
              </span>
            )
          }
        },
        {
          md: 8,
          name: 'slot-component',
          formItemAttributes: {
            label: '总金额'
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <span>
                {[0, 0, 0, ...formData.rpMaterialOrderItems.map(item => item.totalAmount)]
                  .reduce(function (prev, curr, idx, arr) {
                    return prev + curr
                  })
                  .toFixed(2)}
              </span>
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: { disabled: true, type: 'textarea', placeholder: '' },
          formItemAttributes: { label: '申请备注', prop: 'remark' }
        },
        {
          md: 24,
          isShow: itemData.payType == 'WECHAT',
          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'
                    },
                    render: (h, { row }) => {
                      return <div>{{ M: '辅材', P: '配件' }[row.goodsType]}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '交易金额',
                      prop: 'totalAmount'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '交易状态',
                      prop: 'payStatus'
                    },
                    render: (h, { row }) => {
                      return <div>{{ CANCEL: '取消', WAIT: '待支付', PAID: '已支付' }[row.payStatus]}</div>
                    }
                  },
                  {
                    columnAttributes: {
                      label: '交易时间',
                      prop: 'payTime'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '创建时间',
                      prop: 'createTime'
                    }
                  }
                ]}
                table-data={[formData]}
              />
            )
          }
        }
      ]
    },
    getxiangqing() {
      if (this.id) {
        orderBaseDetail({
          orderBaseId: this.id
        }).then(resData => {
          this.orderBaseDetail = resData.data
          changeOrderGetOrderList({
            id: this.id
          }).then(res => {
            this.payData = res.data.map(item => {
              return {
                ...item,
                gengduofeiyong: [
                  {
                    chargeType: 'SERV',
                    amountName: '服务费用',
                    normAmount: item.servicePrice || 0,
                    sfsxf: Math.ceil((item.servicePrice || 0) * 0.6) / 100,
                    sffzje: item.servicePrice - Math.ceil((item.servicePrice || 0) * 0.6) / 100
                  },
                  {
                    chargeType: 'SERV',
                    amountName: '其他费用',
                    normAmount: item.otherPrice || 0,
                    sfsxf: Math.ceil((item.otherPrice || 0) * 0.6) / 100,
                    sffzje: item.otherPrice - Math.ceil((item.otherPrice || 0) * 0.6) / 100
                  }
                ]
              }
            })
            console.log(this.payData)
          })
        })
      }
    },
    enginMaterialCancelFun(item) {
      this.$confirm('是否确认取消申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          enginMaterialCancel({
            id: item.orderId
          }).then(res => {
            this.getxiangqing()
          })
        })
        .catch(() => {})
    },
    toFixed(num = 0) {
      return (num || 0).toFixed(2)
    }
  }
}
</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>