refinery-admin/src/views/oilFinalStatement/oilFinalStatementListInfo.vue

<template>
  <div style="padding: 30px 40px 50px" class="statementInfo">
    <div style="width: 100%; position: absolute; top: 15px; left: 0">
      <div style="display: flex; align-items: center; padding-left: 20px">
        <svg-icon icon-class="iconsiji2" style="font-size: 30px; margin-right: 10px" />
        <span>结算单详情</span>
      </div>
      <el-divider style="width: 100%"></el-divider>
    </div>
    <el-row>
      <el-form ref="form" :model="importData" label-width="110px" size="mini">
        <el-row class="borderBody">
          <el-col :span="6">
            <span class="spanLabel">结算单号</span>
            <br />
            <span>{{ importData.settlementNo }}</span>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">审核状态</span>
            <br />
            <el-tag effect="dark" :type="accountStateEnum.find(item => item.value == importData.auditState).type">
              {{ accountStateEnum.find(item => item.value == importData.auditState).label }}
            </el-tag>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">客户类型</span>
            <br />
            <span>{{ importData.settlementType == 1 ? '企业' : '炼厂' }}</span>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">客户名称</span>
            <br />
            <span>{{ importData.settlementObjectName }}</span>
          </el-col>

          <el-col :span="6">
            <span class="spanLabel">结算总金额</span>
            <br />
            <span>{{ importData.settlementAmount }}</span>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">订单总金额</span>
            <br />
            <span>{{ importData.orderAmount }}</span>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">充值总金额</span>
            <br />
            <span>{{ importData.rechargeAmount }}</span>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">开票总金额</span>
            <br />
            <span>{{ importData.invoicedAmount }}</span>
          </el-col>
          <el-col :span="6">
            <el-col :span="12">
              <span class="spanLabel">创建人</span>
              <br />
              <span>{{ importData.createUserName }}</span>
            </el-col>
            <el-col :span="12">
              <el-popover :disabled="!importData.createMark" placement="bottom" width="200" trigger="click" :content="importData.createMark">
                <el-button slot="reference" size="mini">查看创建备注</el-button>
              </el-popover>
            </el-col>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">创建时间</span>
            <br />
            <span>{{ importData.createTime }}</span>
          </el-col>
          <el-col :span="6">
            <el-col :span="12">
              <span class="spanLabel">审核人</span>
              <br />
              <span>{{ importData.auditUserName }}</span>
            </el-col>
            <el-col :span="12">
              <el-popover :disabled="!importData.auditMark" placement="bottom" width="200" trigger="click" :content="importData.auditMark">
                <el-button slot="reference" size="mini">查看审核备注</el-button>
              </el-popover>
            </el-col>
          </el-col>
          <el-col :span="6">
            <span class="spanLabel">审核时间</span>
            <br />
            <span>{{ importData.auditTime }}</span>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <div slot="table">
      <!--这里放表格和分页-->
      <!-- 列表开始 -->
      <el-table
        :max-height="tableHeight"
        :header-cell-style="{ background: '#f5f5f5' }"
        show-summary
        stripe
        :summary-method="getSummaries"
        :data="importData.orders"
        fit
        style="width: 100%"
        :size="$store.getters.size"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" />
        <template v-for="(item, index) in tableColumns">
          <el-table-column
            v-if="item.show"
            :key="index"
            :fixed="item.fixed"
            :align="item.align"
            :show-overflow-tooltip="true"
            :min-width="item.minWidth"
            :width="item.width"
            :prop="item.prop"
            :sortable="item.sortable"
            :label="item.label"
            :formatter="item.render"
          />
        </template>
      </el-table>
      <!-- 列表结束 -->
    </div>
    <div class="button-style" :span="24">
      <el-divider style="width: 100%"></el-divider>
      <el-button @click="close(1)" style="margin-right: 10px">关闭</el-button>
      <el-button v-if="importData.auditState == 0" type="primary" @click="submit" style="margin-right: 10px">结算单审核 </el-button>
    </div>
    <el-dialog class="dialogInfo" append-to-body :visible.sync="submitDialog" v-if="submitDialog" width="500px">
      <el-form class="messageConfirm" ref="form" :model="importData" label-width="110px" size="mini">
        <div style="width: 100%; position: absolute; top: 15px; left: 0">
          <div style="display: flex; align-items: center; padding-left: 20px">
            <div style="width: 5px; height: 20px; background: #1890ff"></div>
            <span style="margin-left: 10px">结算单审核</span>
          </div>
          <el-divider style="width: 100%"></el-divider>
        </div>
        <el-row style="padding: 0 20px">
          <div style="width: 100%; margin-bottom: 35px; display: flex; align-items: center">
            <img v-if="importData.settlementType == 1" style="width: 18px" src="../../assets/img/oilFinalStatement/jiesuandanQiye.png" alt="" />
            <span style="margin-left: 10px">{{ importData.settlementObjectName }}</span>
          </div>
          <el-form-item label="结算总金额" prop="settlementAmount">
            <span>{{ importData.settlementAmount }}元</span>
          </el-form-item>
          <el-form-item label="订单总金额" prop="orderAmount">
            <span>{{ importData.orderAmount }}元</span>
          </el-form-item>
          <el-form-item label="充值总金额" prop="rechargeAmount">
            <span>{{ importData.rechargeAmount }}元</span>
          </el-form-item>
          <el-form-item label="开票总金额" prop="realAmount">
            <span>{{ importData.invoicedAmount }}元</span>
          </el-form-item>
          <el-form-item label="结算周期" prop="realAmount">
            <span>{{ createT }}至 {{ endT }}</span>
          </el-form-item>
          <el-form-item label="订单总数" prop="companyName">
            <span>{{ importData.orderQuantity }}条</span>
          </el-form-item>

          <el-form-item label="审核备注" prop="auditMark" style="width: 100%">
            <el-input type="textarea" v-model="importData.auditMark"></el-input>
          </el-form-item>
          <div style="color: red; text-align: center; font-weight: 600">注意：确认后，无法再修改。请确认此次该的结算信息是否正确</div>
        </el-row>
        <div :span="24" style="margin-top: 50px; text-align: center; width: 100%">
          <el-divider style="width: 100%"></el-divider>
          <div style="display: flex; justify-content: end; width: 90%; margin: 0 auto">
            <el-button @click="close" size="mini">关闭</el-button>
            <el-button size="mini" type="danger" @click="save(-1)">审核驳回</el-button>
            <el-button size="mini" type="primary" @click="save(1)">审核通过</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import internalCompanyApi from '@/api/user/internalCompany'

export default {
  filters: {},
  props: {
    importData: {
      type: Object,
      default() {}
    }
  },
  data() {
    return {
      tableHeight: document.documentElement.clientHeight - 470 - 55,
      companyList: [],
      roleList: [],
      roleTypeList: [],
      submitDialog: false,
      accountStateEnum: [
        {
          label: '待审核',
          value: 0,
          type: 'warning'
        },
        {
          label: '已审核',
          value: 1,
          type: 'success'
        },
        {
          label: '审核失败',
          value: -1,
          type: 'danger'
        }
      ],
      tableColumns: [
        {
          prop: 'id',
          minWidth: 180,
          label: '订单号',
          show: true,
          render: (row, column, cell) => {
            return cell
          }
        },

        {
          prop: 'actAmount',
          minWidth: 120,
          label: '订单金额',
          show: true,
          render: (row, column, cell) => {
            cell = Number(cell).toFixed(2)
            return cell ? cell : '0.00'
          }
        },
        {
          prop: 'customerSettleAmount',
          minWidth: 120,
          label: '结算金额',
          show: true,
          render: (row, column, cell) => {
            cell = Number(cell).toFixed(2)
            return cell ? cell : '0.00'
          }
        },
        {
          prop: 'customerSettleAmount',
          minWidth: 120,
          label: '充值金额',
          show: true,
          render: (row, column, cell) => {
            cell = Number(cell).toFixed(2)
            return cell ? cell : '0.00'
          }
        },
        {
          prop: 'customerSettleAmount',
          minWidth: 120,
          label: '开票金额',
          show: true,
          render: (row, column, cell) => {
            cell = Number(cell).toFixed(2)
            return cell ? cell : '0.00'
          }
        },
        {
          prop: 'createTime',
          minWidth: 150,
          label: '创建日期',
          show: true,
          render: (row, column, cell) => {
            return cell
          }
        }
      ],
      createT: '',
      endT: ''
    }
  },
  created() {
    // 增加监听事件，窗口变化时得到高度。
    window.addEventListener('resize', this.getHeight, false)
  },
  methods: {
    settlement(val, data) {
      if (val == 0) {
        return '待审核'
      }
      if (val == 1) {
        return '已审核'
      }
      if (val == -1) {
        return '审核失败'
      }
    },
    indexMethod(index) {
      return (index + 1) * 1
    },
    getHeight() {
      // 获取浏览器高度并计算得到表格所用高度。
      this.tableHeight = document.documentElement.clientHeight - 470 - 55
    },
    close(val) {
      if (val == 1) {
        this.$emit('closeDialog')
        this.tableColumns = []
      } else {
        this.submitDialog = false
      }
    },
    submit() {
      let payRealAmountEnd = []
      let customerSettleAmountList = []
      this.importData.orders.forEach(item => {
        this.endT = item.createTime
        payRealAmountEnd.push(item.actAmount ? item.actAmount : '0')

        customerSettleAmountList.push(item.customerSettleAmount ? item.customerSettleAmount : '0')
      })
      function sum(val) {
        return eval(val.join('+'))
      }
      this.importData.settlementAmount = Number(sum(customerSettleAmountList)).toFixed(2)
      this.importData.orderAmount = Number(sum(payRealAmountEnd)).toFixed(2)
      this.importData.rechargeAmount = Number(sum(customerSettleAmountList)).toFixed(2)
      this.importData.invoicedAmount = Number(sum(customerSettleAmountList)).toFixed(2)

      this.endT = this.endT.split(' ')[0]
      this.createT = this.importData.orders[0].createTime.split(' ')[0]
      this.submitDialog = true
    },

    save(val) {
      var data = {
        id: this.importData.id,
        confirmSource: 'XOIL_OMS_WEB',
        settlementType: this.importData.settlementType
      }
      if (val == -1) {
        data.auditState = -1
      } else if (val == 1) {
        data.auditState = 1
      }

      data.auditMark = this.importData.auditMark
      internalCompanyApi.update(data).then(res => {
        if (res.code == 20000) {
          this.importData = res.data
          this.$message.success('操作成功')
          this.$emit('closeDialog')
          this.$emit('getByPage')
        }
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      let actAmount = 0 // 订单金额
      let customerSettleAmount = 0 // 充值=结算=开票
      data.forEach(item => {
        customerSettleAmount += Number(item.customerSettleAmount)
        actAmount += Number(item.actAmount)
      })
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (this.importData.settlementType == 1) {
          switch (
            column.property // column.property可以匹配它的每一列的命名， 然后赋值
          ) {
            case 'customerSettleAmount':
              sums[index] = customerSettleAmount.toFixed(2) + '元' // 值取自后台
              break
            case 'actAmount':
              sums[index] = actAmount.toFixed(2) + '元'
              break

            default:
              break
          }
        }
      })

      return sums
    }
  }
}
</script>
<style scoped>
.el-divider--horizontal {
  margin: 10px 0;
}
.el-form-item__content >>> .el-date-editor.el-input {
  width: 100%;
}
.el-divider--horizontal {
  margin: 10px 0;
}
.borderBody {
  box-shadow: 0px 0px 3px 0px #c1c1c1;
  padding: 20px 15px;
  margin-bottom: 30px;
  font-size: 14px;
}
.borderBody >>> .el-col {
  height: 55px;
  margin-bottom: 15px;
  padding-left: 10px;
}
.borderBody >>> .spanLabel {
  display: inline-block;
  color: #606266;
  font-weight: 700;
  margin-bottom: 10px;
}
.statementInfo >>> .el-table--fit th.gutter {
  background: #f5f5f5;
}
.el-dialog__wrapper >>> .el-dialog__header {
  text-align: center;
}
.dialogInfo >>> .el-dialog__body {
  padding: 10px 20px;
}
.dialogInfo .el-button {
  width: 80px;
}
.button-style {
  margin-top: 20px;
  text-align: right;
  width: 100%;
  position: absolute;
  bottom: 15px;
  left: 0;
}
.button-style .el-button {
  width: 120px;
}
.el-form-item--mini.el-form-item {
  display: flex;
  align-items: center;
}
.el-form-item--mini >>> .el-form-item__content {
  margin-left: 0 !important;
}
.messageConfirm .el-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 25px;
  justify-content: space-between;
}
.messageConfirm .el-form-item {
  display: flex;
  flex-direction: column;
  width: 40%;
  align-items: normal;
}
.messageConfirm >>> .el-form-item__label {
  text-align: left;
}
</style>