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">
            <zj-form-module :title="'支付费用' + (index + 1)" :form-data="payData[index]"
              :form-items="[formItemsL1, formItems(item)][workOrderType]">
              <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: 0, // 0普通工单, 1维保工单
    },
  },
  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>
              {this?.workOrderType == 0 ? (
                <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 == 1 ? [
                (<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 (this?.workOrderType == 0) {
                  return [{
                    columnAttributes: {
                      label: '师傅分账金额',
                      prop: 'workerAmount',
                    }
                  }, {
                    columnAttributes: {
                      label: '师傅手续费',
                      prop: 'workerProceAmount',
                    }
                  }, {
                    columnAttributes: {
                      label: '网点分账金额',
                      prop: 'websitAmount',
                    }
                  }, {
                    columnAttributes: {
                      label: '网点手续费',
                      prop: 'websitProceAmount',
                    }
                  }]
                }
                return []
              })(),
              ]}
              table-data={[formData.workerOrderItems, formData.rpMaterialOrderItems][this?.workOrderType]}
            />
          )
        }
      }, {
        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]}
            />
          )
        }
      }]
    },
  },
  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.companyWechatName}
              </el-descriptions-item>
              <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 (this?.workOrderType == 0) {
          changeOrderGetOrderList({
            id: this.id
          }).then(res => {
            this.payData = res.data
          })
        } else if (this?.workOrderType == 1) {
          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>