supply-front/src/views/logisticsBill/components/ExceptionBox.vue

<template>
  <el-dialog
    title="账单异常"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%"
    :show-close="false"
      >
    <el-row style="margin: 20px 0">
      <el-col :span="8" v-if="detail.merchantCheckCode">经销商：{{ detail.merchantName }}</el-col>
      <el-col :span="8">对账月份：{{ detail.autoCheckTimeSupply }}</el-col>
      <el-col v-if="detail.merchantCheckCode" :span="8">商家对账编码：{{ detail.merchantCheckCode }}</el-col>
      <el-col v-if="detail.salesCheckCode" :span="8">销司对账编码：{{ detail.salesCheckCode }}</el-col>
    </el-row>
    <zj-table
      ref="tableEl"
      :is-drop="true"
      :columns="columns"
      :table-data="recordSelected"
      :table-attributes="{
        border: true
      }"
    />
    <el-row type="flex" style="margin: 20px 0">
      <el-col :span="2">备注： </el-col>
      <el-col
        ><el-input
          v-model="comment"
          type="textarea"
          :rows="2"
          placeholder="请输入备注"
          :maxlength="-1"
          :show-word-limit="false"
          :autosize="{ minRows: 2, maxRows: 4 }"
        />
      </el-col>
    </el-row>
    <span slot="footer">
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onSbumit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ticketGoToReview } from '@/api/reconciliation'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    recordSelected: {
      type: Array,
      default: () => []
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      comment: ''
    }
  },
  computed: {
    columns() {
      return [
        {
          columnAttributes: {
            label: '订单类型',
            prop: 'orderType',
            width: 200
          },
          render: (h, { row }) => {
            const { orderType } = row
            const typeObj = {
              TOB: '商家机工程机类型',
              ALL: '所有类型，广州的订单统一 开单价',
              TOC: '佛山销售销售订单类型公司'
            }
            return <div>{typeObj[orderType]}</div>
          }
        },
        {
          columnAttributes: {
            label: '实际是否卸货',
            prop: 'isRealUnload',
            width: 200
          },
          render: (h, { row }) => {
     

            return (
              <el-select
                value={row.isRealUnload}
                onInput={e => (row.isRealUnload = e)}
                placeholder='请选择'
                clearable
                filterable
                size='mini'
              >
                {[
                  { label: '是', value: 1 },
                  { label: '否', value: 0 }
                ].map(k => {
                  return <el-option key={k.value} label={k.label} value={k.value}></el-option>
                })}
              </el-select>
            )
          }
        },
        {
          columnAttributes: {
            label: '实际是否上楼',
            prop: 'isRealUpstairs',
            width: 200
          },
          render: (h, { row }) => {
    
            return (
              <el-select
                value={row.isRealUpstairs}
                onInput={e => (row.isRealUpstairs = e)}
                placeholder='请选择'
                clearable
                filterable
                size='mini'
              >
                {[
                  { label: '是', value: 1 },
                  { label: '否', value: 0 }
                ].map(k => {
                  return <el-option key={k.value} label={k.label} value={k.value}></el-option>
                })}
              </el-select>
            )
          }
        },
        {
          columnAttributes: {
            label: '订单时间',
            prop: 'orderDate',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '运费结算系数',
            prop: 'coefficient',
            width: 200
          },
          render: (h, { row }) => {
            return (
              <el-input
                value={row.coefficient}
                onInput={e => (row.coefficient = e)}
                placeholder='可修改内容'
                size='mini'
                clearable
              ></el-input>
            )
          }
        },
        {
          columnAttributes: {
            label: '补贴结算系数',
            prop: 'subsidyCoefficient',
            width: 200
          },
          render: (h, { row }) => {
            return (
              <el-input
                value={row.subsidyCoefficient}
                onInput={e => (row.subsidyCoefficient = e)}
                placeholder='可修改内容'
                size='mini'
                clearable
              ></el-input>
            )
          }
        },
        {
          columnAttributes: {
            label: '账号对应物料数量',
            prop: 'materialNumber',
            width: 200
          },
          render: (h, { row }) => {
            return (
              <el-input
                value={row.materialNumber}
                onInput={e => (row.materialNumber = e)}
                placeholder='可修改内容'
                size='mini'
                clearable
              ></el-input>
            )
          }
        },
        {
          columnAttributes: {
            label: '物料开单价',
            prop: 'materialPrice',
            width: 200
          },
          render: (h, { row }) => {
            return (
              <el-input
                value={row.materialPrice}
                onInput={e => (row.materialPrice = e)}
                placeholder='可修改内容'
                size='mini'
                clearable
              ></el-input>
            )
          }
        },
        {
          columnAttributes: {
            label: '退货费用',
            prop: 'returnOrderCost',
            width: 200
          },
          render: (h, { row }) => {
            return (
              <el-input
                value={row.returnOrderCost}
                onInput={e => (row.returnOrderCost = e)}
                placeholder='可修改内容'
                size='mini'
                clearable
              ></el-input>
            )
          }
        },
        {
          columnAttributes: {
            label: '单价计算',
            prop: 'unitPrice',
            width: 200
          },
          render: (h, { row }) => {
            return (
              <el-input
                value={row.unitPrice}
                onInput={e => (row.unitPrice = e)}
                placeholder='可修改内容'
                size='mini'
                clearable
              ></el-input>
            )
          }
        },
        {
          columnAttributes: {
            label: '卸货上楼结算系数',
            prop: 'unloadUpstairsCoefficient',
            width: 200
          },
          render: (h, { row }) => {
            return (
              <el-input
                value={row.unloadUpstairsCoefficient}
                onInput={e => (row.unloadUpstairsCoefficient = e)}
                placeholder='可修改内容'
                size='mini'
                clearable
              ></el-input>
            )
          }
        }
      ]
    }
  },
  methods: {
    onClose() {
      this.comment = ''
      this.$emit('close')
    },
    onSbumit() {
      let ticketType = null
      let orderCode = null
      if (this.detail.merchantCheckCode) {
        ticketType = 'MERCHANT_CHECK'
        orderCode = this.detail.merchantCheckCode
      } else {
        ticketType = 'SALES_CHECK'
        orderCode = this.detail.salesCheckCode
      }

      ticketGoToReview({
        ticketType,
        orderCode,
        comment: this.comment,
        modifiedCostBillList: this.recordSelected
      }).then(res => {
        this.$message({
          type: 'success',
          message: '成功'
        })
        this.onClose()
      })
    }
  }
}
</script>

<style lang="sass" scoped></style>