zfire-newmall-admin/src/views/valueAddedService/orderSettleManag/index.vue

<template>
  <template-page ref="pageRef" :get-list="getList" :exportList="exportList" :table-attributes="tableAttributes"
    :table-events="tableEvents" :moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation"
    :operationColumnWidth="200" :optionsEvensGroup="optionsEvensGroup">
    <div class="cartographer">
      <el-dialog :title="formTypeName[formType]" width="100%" :modal="false" :visible.sync="formDialog"
        :before-close="formCancel">
        <zj-form-container v-if="formDialog" ref="formRef" :form-data="formData" :styleSwitch="false">
          <zj-form-module title="基础信息" label-width="120px" :showPackUp="false" :form-data="formData"
            :form-items="formItems">
          </zj-form-module>
          <zj-form-module title="订单信息" label-width="120px" :showPackUp="false" :form-data="formData"
            :form-items="formItemsList">
          </zj-form-module>
          <zj-form-module title="附件图片" label-width="120px" :showPackUp="false" :form-data="formData"
            :form-items="formItemsImgs">
          </zj-form-module>
        </zj-form-container>
        <div slot="footer" v-if="formType" class="dialog-footer">
          <el-button size="mini" @click="formCancel">取 消</el-button>
          <el-button size="mini" @click="formConfirm" type="primary">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import { increOrderSettleList, increOrderSettleListExport, increOrderSettleDetail, increOrderSettleConfirm, increOrderSettleRefund } from "@/api/orderSettleManag.js"
import ImageUpload from '@/components/file-upload'
export default {
  props: {
    storageType: {
      type: String,
      default: ""
    }
  },
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [[
        [
          {
            name: '批量结算',
            click: () => {
              if (this.recordSelected.length === 0) {
                this.$message.warning('请勾选订单')
                return
              }
              increOrderSettleConfirm(this.recordSelected.map(item => item.id)).then(res => {
                this.$message({ type: 'success', message: `成功!` })
                this.$refs.pageRef.refreshList()
              })
            }
          },
        ]
      ]],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中数据
      recordSelected: [],
      formTypeName: ["查看", "结算"],
      formType: -1,
      formData: {
        pgIncreItems: []
      },
      formDialog: false,
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [{
        md: 24,
        isShow: true,
        name: 'slot-component',
        formItemAttributes: {
          label: '',
          prop: '',
          'label-width': '0px'
        },
        render: (h, { props, onInput }) => {
          var { value } = props
          return (
            <div>
              <el-descriptions border title="" column={2} colon={false} labelStyle={{ width: '10%' }} contentStyle={{ width: '40%' }}>
                <el-descriptions-item label="所属商户">
                  {this.formData.companyWechatName}
                </el-descriptions-item>
                <el-descriptions-item label="销售网点">
                  {this.formData.websitName}
                </el-descriptions-item>
                <el-descriptions-item label="订单单号" >
                  {this.formData.id}
                </el-descriptions-item>
                <el-descriptions-item label="师傅姓名" >
                  {this.formData.workerName}
                </el-descriptions-item>
                <el-descriptions-item label="师傅联系电话">
                  {this.formData.workerMobile}
                </el-descriptions-item>
                <el-descriptions-item label="师傅身份证号">
                  {this.formData.workerIdcard}
                </el-descriptions-item>
                <el-descriptions-item label="客户姓名" >
                  {this.formData.userName}
                </el-descriptions-item>
                <el-descriptions-item label="客户电话" >
                  {this.formData.userMobile}
                </el-descriptions-item>
                <el-descriptions-item label="详细地址">
                  {this.formData.userAddress}
                </el-descriptions-item>
                <el-descriptions-item label="内机条码">
                  {this.formData.insideCode}
                </el-descriptions-item>
                <el-descriptions-item label="服务单号" >
                  {this.formData.serviceNo}
                </el-descriptions-item>
                <el-descriptions-item label="发票价格" >
                  {this.formData.invoiceAmount}
                </el-descriptions-item>
                <el-descriptions-item label="发票时间">
                  {this.formData.invoiceTime}
                </el-descriptions-item>
                <el-descriptions-item label="服务截止时间">
                  {this.formData.serviceEndTime}
                </el-descriptions-item>
                <el-descriptions-item label="创建人" >
                  {this.formData.createBy}
                </el-descriptions-item>
                <el-descriptions-item label="创建时间" >
                  {this.formData.createTime}
                </el-descriptions-item>
                <el-descriptions-item label="支付状态">
                  {({ "EXPIRE": "过期", "CANCEL": "取消", "PAID": "已支付", "WAIT": "待支付", "REFUND": "已退款" })[this.formData.payStatus] || ""}
                </el-descriptions-item>
                <el-descriptions-item label="支付方式">
                  {({ 1: "扫码支付", 2: "代客支付" })[this.formData.payType] || ""}
                </el-descriptions-item>
                <el-descriptions-item label="支付订单号" >
                  {this.formData.payNo}
                </el-descriptions-item>
                <el-descriptions-item label="支付时间" >
                  {this.formData.payTime}
                </el-descriptions-item>
                <el-descriptions-item label="微信流水号">
                  {this.formData.transcationId}
                </el-descriptions-item>
                <el-descriptions-item label="师傅销售佣金">
                  {this.formData.workerAmount}
                </el-descriptions-item>
                <el-descriptions-item label="结算人员" >
                  {this.formData.updateBy}
                </el-descriptions-item>
                <el-descriptions-item label="操作时间" >
                  {this.formData.updateTime}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          )
        }
      }]
    },
    formItemsList() {
      return [{
        md: 24,
        isShow: true,
        name: 'slot-component',
        formItemAttributes: {
          label: '',
          prop: '',
          'label-width': '0px'
        },
        render: (h, { props, onInput }) => {
          var { value } = props
          return (
            <zj-table
              columns={[{
                columnAttributes: {
                  label: '服务类型',
                  prop: 'type'
                },
                render: (h, { row, column, index }) => {
                  return <div style="padding: 0 10px">
                    {({ 1: "延保", 2: "清洗" })[row.type] || ""}
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '使用类型',
                  prop: 'usedType'
                },
                render: (h, { row, column, index }) => {
                  return <div style="padding: 0 10px">
                    {({ COUNT: "使用次数", YEAR: "使用年限" })[row.usedType] || ""}
                  </div>
                }
              }, {
                columnAttributes: {
                  label: '品牌',
                  prop: 'brandName'
                }
              },
              {
                columnAttributes: {
                  label: '产品大类',
                  prop: 'mainName'
                }
              },
              {
                columnAttributes: {
                  label: '服务内容',
                  prop: 'content'
                }
              },
              {
                columnAttributes: {
                  label: '服务金额（元）',
                  prop: 'amount'
                }
              },
              {
                columnAttributes: {
                  label: '使用限值',
                  prop: 'limitNum'
                }
              },
              {
                columnAttributes: {
                  label: '总手续费',
                  prop: 'commissionAmount'
                }
              },
              {
                columnAttributes: {
                  label: '师傅分成金额',
                  prop: 'workerAmount'
                }
              },
              {
                columnAttributes: {
                  label: '网点分成金额',
                  prop: 'websitAmount'
                }
              }]}
              tableData={[{
                ...(this.formData.increItem || {}),
                ...(this.formData.incre || {}),
                workerAmount: this.formData.workerAmount,
                websitAmount: this.formData.websitAmount,
                commissionAmount: this.formData.commissionAmount
              }]}
              tableAttributes={{
                size: 'mini',
                border: true,
              }} />
          )
        }
      }]
    },
    formItemsImgs() {
      return [{
        md: 24,
        name: 'slot-component',
        formItemAttributes: {
          label: '',
          prop: '',
          'label-width': '0px'
        },
        render: (h, { props, onInput }) => {
          return (
            <ImageUpload
              fileList={
                [{ key: "insideCodeImg", name: "内机条码" }, { key: "machineImg", name: "机器铭牌图片" }, { key: "buyCertImg", name: "购机凭证图片" }].map((item) => ({ url: this.formData[item.key], name: item.name }))
              }
              limit={1000}
              isEdit={false}
              viewOnline={false}
              download={false}
              showName={true}
            />
          )
        }
      }]
    },
  },
  methods: {
    selectable(row, index) {
      return ["PAID"].includes(Object.entries(row.selectMapData.payStatus).find(([key, val]) => val == row.payStatus)?.[0]) &&
        ["ING"].includes(Object.entries(row.selectMapData.settleStatus).find(([key, val]) => val == row.settleStatus)?.[0])
    },
    // 列表请求函数
    getList: increOrderSettleList,
    // 列表导出函数
    exportList: increOrderSettleListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'residuNum') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {row["increType"] != 1 ? row["residuNum"] : ""}
            </div>
          )
        }
      }
      if (item.jname === 'serviceEndTime') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {row[column.columnAttributes.prop] ? row[column.columnAttributes.prop].split(" ")[0] : ""}
            </div>
          )
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 操作按钮
    operation(h, { row, index, column }) {

      return (
        <div class='operation-btns'>
          <el-button type="text" onClick={() => {
            this.formType = 0
            this.getDetail(row.id)
          }}>查看</el-button>
          {["PAID", "REFUND"].includes(row.payStatus) ? (
            <el-button type="text" onClick={() => {
              this.$router.push({
                name: "workOrderPool",
                query: {
                  pgIncreItemId: row.id,
                }
              })
            }}>服务单明细</el-button>
          ) : null}
          {["PAID"].includes(row.payStatus) && ["ING"].includes(row.settleStatus) ? (
            <el-popconfirm
              title={`是否确定退款？`}
              onConfirm={() => {
                increOrderSettleRefund({ id: row.id }).then(res => {
                  this.$message({ type: 'success', message: `退款成功!` })
                  this.$refs.pageRef.refreshList()
                })
              }}
            >
              <el-button type="text" slot="reference">退款</el-button>
            </el-popconfirm>
          ) : null}
          {["PAID"].includes(row.payStatus) && ["ING"].includes(row.settleStatus) ? (
            <el-button type="text" onClick={() => {
              this.formType = 1
              this.getDetail(row.id)
            }}>结算</el-button>
          ) : null}
        </div>
      )
    },
    getDetail(id) {
      increOrderSettleDetail({ id }).then(res => {
        Object.assign(this.formData, res.data)
        this.openForm()
      })
    },
    openForm() {
      this.formDialog = true
    },
    // 关闭弹窗
    formCancel() {
      this.$refs.formRef.$refs.inlineForm.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          increOrderSettleConfirm([this.formData.id]).then(res => {
            this.$message({ type: 'success', message: `操作成功!` })
            this.formCancel()
            this.$refs.pageRef.refreshList()
          })
        }
      })
    },
  }
}
</script>

<style lang="scss">
.redbordererr {
  .el-form-item {
    margin: 0 !important;
    overflow: hidden;
  }
}
</style>