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
              :title="'支付费用' + (index + 1)"
              :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'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    workOrderType: {
      type: Number,
      default: 1 // 1普通工单, 4维保工单
    }
  },
  data() {
    return {
      payData: []
    }
  },
  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.websitName}</el-descriptions-item>
                <el-descriptions-item label="工单号">{formData.workerOrderId}</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: '审批' }[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="支付总金额">{formData.totalAmount}</el-descriptions-item>
                {!!~[1, 2, 3].indexOf(this?.workOrderType) ? (
                  <el-descriptions-item label="总手续费">{formData.commissionAmount}</el-descriptions-item>
                ) : null}
                <el-descriptions-item label="支付时间">{formData.payTime}</el-descriptions-item>
                <el-descriptions-item label=""></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'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '数量',
                      prop: 'num'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '费用金额',
                      prop: 'totalAmount'
                    }
                  },
                  ...(() => {
                    if (!!~[1, 2, 3].indexOf(this?.workOrderType)) {
                      return [
                        {
                          columnAttributes: {
                            label: '师傅分账金额',
                            prop: 'workerAmount'
                          }
                        },
                        {
                          columnAttributes: {
                            label: '师傅手续费',
                            prop: 'workerProceAmount'
                          }
                        },
                        {
                          columnAttributes: {
                            label: '网点分账金额',
                            prop: 'websitAmount'
                          }
                        },
                        {
                          columnAttributes: {
                            label: '网点手续费',
                            prop: 'websitProceAmount'
                          }
                        }
                      ]
                    }
                    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'
                    }
                  },
                  {
                    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]}
              />
            )
          }
        },

        {
          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 || []}
              />
            )
          }
        }
      ]
    }
  },
  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'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '数量',
                      prop: 'num'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '费用金额',
                      prop: 'totalAmount'
                    }
                  }
                ]}
                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) {
        if (!!~[1, 2, 3].indexOf(this?.workOrderType)) {
          changeOrderGetOrderList({
            id: this.id
          }).then(res => {
            this.payData = res.data
          })
        } else if (this?.workOrderType == 4) {
          enginMaterialDetailWorker({
            workerOrderId: this.id
          }).then(res => {
            this.payData = res.data
          })
        }
      }
    },
    enginMaterialCancelFun(item) {
      this.$confirm('是否确认取消申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          enginMaterialCancel({
            id: item.orderId
          }).then(res => {
            this.getxiangqing()
          })
        })
        .catch(() => {})
    }
  }
}
</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>