jsm-mall-front/src/views/partsManagement/accessoryWebsite/website-parts-to-sales/website-outside-new-parts-to-sales/components/website-outside-new-parts-to-sales-information.vue

<template>
  <div class="sales-order-information">
    <div class="sales-order-information-sl">
      <el-page-header @back="goBack" content="销售单信息"></el-page-header>
      <br />
      <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
        <el-descriptions-item>
          <template slot="label"> 申请单号 </template>
          <el-input disabled size="small" v-model="form.applyNo"></el-input>
        </el-descriptions-item>
        <el-descriptions-item v-if="form.applyCategoryName">
          <template slot="label"> 申请类别 </template>
          <el-input disabled size="small" v-model="form.applyCategoryName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item v-if="form.applyTypeName">
          <template slot="label"> 申请类型 </template>
          <el-input disabled size="small" v-model="form.applyTypeName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请人 </template>
          <el-input disabled size="small" v-model="form.createBy"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请单位 </template>
          <el-input disabled size="small" v-model="form.receiveWebsitName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请日期 </template>
          <el-input disabled size="small" v-model="form.createTime"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 退款金额 </template>
          <el-input disabled size="small" v-model="form.refundAmount"></el-input>
        </el-descriptions-item>
        <el-descriptions-item v-if="form.refundModeName">
          <template slot="label"> 退件方式 </template>
          <el-input disabled size="small" v-model="form.refundModeName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 收货地址 </template>
          <div>{{ form.receiveAddress }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发货单位 </template>
          <el-input disabled size="small" v-model="form.createBy"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: -1px">
        <el-descriptions size="small" border labelClassName="labelClassName">
          <el-descriptions-item labelStyle="width:15.45%">
            <template slot="label"> 备注 </template>
            <el-input disabled type="textarea" :rows="1" size="small" v-model="form.remark"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-top: -1px">
        <el-table
          :data="form.oldRefundManageItemBeanList || []"
          size="mini"
          border
          header-cell-class-name="headerRowColor"
          style="width: 100%"
        >
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="旧件编码">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.oldPartsNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column label="旧件名称">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.oldPartsName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.qty }}</div>
            </template>
          </el-table-column>
          <el-table-column label="审批数量">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.confirmQty }}</div>
            </template>
          </el-table-column>
          <el-table-column label="旧件图片">
            <template slot-scope="scope">
              <div v-if="scope.row.oldImage" class="serial_number">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="$showImgUrl(scope.row.oldImage)"
                  :preview-src-list="[$showImgUrl(scope.row.oldImage)]"
                >
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="铭牌">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.tab }}</div>
            </template>
          </el-table-column>
          <el-table-column label="新件编码">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.newPartsNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column label="新件名称">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.newPartsName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="维修记录编号">
            <template slot-scope="scope">
              <div class="serial_number">
                {{ scope.row.repairRecordNumber }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="机器条形码">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.partsBarcode }}</div>
            </template>
          </el-table-column>
          <el-table-column label="修复时间">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.repairTime }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: -1px">
        <el-table
          :data="form.partsOldRefundManageRecordList || []"
          size="mini"
          border
          header-cell-class-name="headerRowColor"
          style="width: 100%"
        >
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="市场价">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.marketPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column label="配件名称">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.partsName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="配件编码">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.partsNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.qty }}</div>
            </template>
          </el-table-column>

          <el-table-column label="退款金额">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.refundAmount }}</div>
            </template>
          </el-table-column>

          <el-table-column label="销售单号">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.salesId }}</div>
            </template>
          </el-table-column>
          <el-table-column label="销售价">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.salesPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column label="优惠价2">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.secondPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column label="总金额">
            <template slot-scope="scope">
              <div class="serial_number">{{ scope.row.totalAmount }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <p>网点审批信息</p>
      <div style="margin-top: -1px">
        <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
          <el-descriptions-item>
            <template slot="label"> 审批人 </template>
            <el-input disabled size="small" v-model="form.examineBy"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> *是否优惠价格结算 </template>
            <div>
              <el-radio
                :disabled="~['WAIT_REVIEW', 'REVIEWED', 'AGREE'].indexOf(form.flag) ? true : false"
                v-model="form.isDisc"
                :label="true"
                >有优惠价</el-radio
              >
              <el-radio
                :disabled="~['WAIT_REVIEW', 'REVIEWED', 'AGREE'].indexOf(form.flag) ? true : false"
                v-model="form.isDisc"
                :label="false"
                >无优惠价</el-radio
              >
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-top: -1px">
        <el-descriptions size="small" border labelClassName="labelClassName">
          <el-descriptions-item labelStyle="width:15.45%">
            <template slot="label"> 备注 </template>
            <el-input
              :disabled="~['WAIT_REVIEW', 'REVIEWED', 'AGREE'].indexOf(form.flag) ? true : false"
              type="textarea"
              :rows="1"
              size="small"
              v-model="form.examineRemark"
            ></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <p v-if="~['WAIT_REVIEW', 'REVIEWED'].indexOf(form.flag)">中心审批信息</p>
      <div v-if="~['WAIT_REVIEW', 'REVIEWED'].indexOf(form.flag)" style="margin-top: -1px">
        <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
          <el-descriptions-item>
            <template slot="label"> 审批人 </template>
            <el-input disabled size="small" v-model="form.reviewBy"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> *审批结果 </template>
            <div>
              <el-radio
                :disabled="~['REVIEWED'].indexOf(form.flag) ? true : false"
                v-model="form.reviewResult"
                :label="true"
                >可以返还差价</el-radio
              >
              <el-radio
                :disabled="~['REVIEWED'].indexOf(form.flag) ? true : false"
                v-model="form.reviewResult"
                :label="false"
                >无需返还差价</el-radio
              >
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-if="~['WAIT_REVIEW', 'REVIEWED'].indexOf(form.flag)" style="margin-top: -1px">
        <el-descriptions size="small" border labelClassName="labelClassName">
          <el-descriptions-item labelStyle="width:15.45%">
            <template slot="label"> 备注 </template>
            <el-input
              :disabled="~['REVIEWED'].indexOf(form.flag) ? true : false"
              type="textarea"
              :rows="1"
              size="small"
              v-model="form.reviewRemark"
            ></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <br />
      <el-row style="text-align: right">
        <el-button v-if="apiType" size="small" type="primary" @click="determine">提交</el-button>
        <el-button v-if="apiType" size="small" @click="reset">重置</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  workerOldRefundDetail,
  workerOldRefundExamine,
  workerOldRefundReview
} from '@/api/material-system/website/website-parts-worker-refund-manage'
export default {
  props: {
    type: {
      type: Number
    },
    apiType: {
      type: Number
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: '',
      disabled: false,
      statest: '',
      t1options: [
        { label: '通过', value: 'AGREE' },
        { label: '驳回', value: 'REJECT' }
      ]
    }
  },
  mounted() {
    if (~[1, 2].indexOf(this.type) && this.item && this.item.applyNo) {
      if (this.type === 2) {
        this.disabled = true
      }
      workerOldRefundDetail({
        applyNo: this.item.applyNo
      })
        .then(res => {
          this.form = res.data
          if (this.type === 1) {
            this.form.refundedBy = this.$store.getters.name
            this.statest = this.form.flag
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    },
    reset() {
      this.form.examineRemark = ''
    },
    determine() {
      var { applyNo, flag, examineRemark, isDisc, reviewResult, reviewRemark } = this.form
      if (!applyNo || !flag) {
        this.$message({
          type: 'info',
          message: `必填信息不完整!`
        })
        return
      }
      if (isDisc === undefined || isDisc === '') {
        this.$message({
          type: 'info',
          message: `必填选择是否优惠价格结算!`
        })
        return
      }
      if (!this.apiType || this.apiType <= 0) {
        return
      }
      ;[workerOldRefundExamine, workerOldRefundReview]
        [this.apiType - 1]({
          isDisc,
          reviewResult,
          applyNo,
          flag,
          examineRemark,
          reviewRemark
        })
        .then(res => {
          this.$message({
            type: 'success',
            message: `提交成功!`
          })
          this.$emit('goBack', true)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.sales-order-information {
  min-width: 860px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  overflow: hidden;
  ::v-deep .labelClassName {
    width: 200px !important;
  }
  .sales-order-information-sl {
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .serial_number {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6px !important;
    text-align: center;
  }
  ::v-deep .is-disabled {
    .el-textarea__inner,
    .el-input__inner {
      background-color: #fff;
      color: #606266;
      border-color: #fff;
    }
    .el-input__suffix {
      display: none;
    }
  }
  ::v-deep th .cell {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  ::v-deep .el-table__cell {
    .el-select,
    .el-input,
    .el-textarea__inner,
    .el-input__inner {
      height: 100%;
      border: none !important;
    }
  }
  ::v-deep .cell {
    height: 100%;
    padding: 0 !important;
  }
  ::v-deep .headerRowColor {
    .cell {
      height: 100%;
      padding: 6px !important;
    }
  }
}
</style>