jsm-mall-front/src/views/partsManagement/masterAccountingManagement/components/website-parts-shop-sales-information.vue

<template>
  <div class="website-parts-shop-sales">
    <div class="website-parts-shop-sales-sl" v-if="formData">
      <el-page-header
        @back="
          () => {
            $emit('goBack')
          }
        "
        content="销售单信息"
      ></el-page-header>
      <br />
      <div style="margin-bottom: -1px">
        <div style="display: flex">
          <div style="width: 50%; margin-right: -1px">
            <el-descriptions
              :column="2"
              size="small"
              border
              labelClassName="labelClassName"
              contentClassName="contentClassName"
            >
              <el-descriptions-item>
                <template slot="label"> 网点 </template>
                <div>
                  {{ formData.websitName }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 申请类别 </template>
                <div>
                  {{ { TRADE: '商用空调', ELEC: '生活电器（小家电）', HOME: '家用空调' }[formData.applyCategory] }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 申请类型 </template>
                <div>
                  {{ { '0': '普通申请', '1': '急件申请', '2': '备件申请' }[formData.applyType] }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 发货方式 </template>
                <div>
                  {{ { '0': '快递', '1': '自提' }[formData.deliveryType] }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="width: 50%">
            <el-descriptions
              :column="2"
              size="small"
              border
              labelClassName="labelClassName"
              contentClassName="contentClassName"
            >
              <el-descriptions-item>
                <template slot="label"> 销售类型 </template>
                <div>
                  {{ { CUSTOMER: '客户', WORKER: '内部师傅' }[formData.buyPeople] }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 申请人 </template>
                <div>
                  {{ formData.workerName }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 联系电话 </template>
                <div>
                  {{ formData.mobile }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 接收单位 </template>
                <div>
                  {{ formData.receiveUnit }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
      <div style="margin-bottom: -1px">
        <el-descriptions
          :column="2"
          size="small"
          border
          labelClassName="labelClassName2"
          contentClassName="contentClassNam2"
        >
          <el-descriptions-item>
            <template slot="label"> 发货单位 </template>
            <div>
              {{ formData.websitName }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 操作人 </template>
            <div>
              <!--  -->
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 收件地址 </template>
            <div>
              {{ formData.receiveAddr }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 详细地址 </template>
            <div>
              {{ formData.addr }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-bottom: -1px">
        <div style="display: flex">
          <div style="width: 50%; margin-right: -1px">
            <el-descriptions
              :column="2"
              size="small"
              border
              labelClassName="labelClassName"
              contentClassName="contentClassName"
            >
              <el-descriptions-item>
                <template slot="label"> 支付方式 </template>
                <div>
                  {{ { CASH: '现金', ALLINPAY: '通联', CREDIT: '记账' }[formData.payType] }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 销售金额 </template>
                <div>
                  {{ formData.totalAmount }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 应收金额 </template>
                <div>
                  {{ formData.itemTotalAmount }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 收款状态 </template>
                <div>
                  {{ formData.creditStatus ? '已收款' : '未收款' }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="width: 50%">
            <el-descriptions
              :column="2"
              size="small"
              border
              labelClassName="labelClassName"
              contentClassName="contentClassName"
            >
              <el-descriptions-item>
                <template slot="label"> 下单时间 </template>
                <div>
                  {{ formData.createTime }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> </template>
                <div>
                  <!--  -->
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 收款人 </template>
                <div>
                  {{ formData.updateBy }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 收款时间 </template>
                <div>
                  {{ formData.updateTime }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
      <div style="margin-bottom: -1px">
        <el-descriptions size="small" border labelClassName="labelClassName">
          <el-descriptions-item labelStyle="width:15.45%">
            <template slot="label"> 备注 </template>
            <div>
              <!--  -->
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-bottom: 10px; margin-top: 10px; width: 100%">
        <el-table :data="items" size="mini" border style="width: 100%" header-cell-class-name="headerRowColor">
          <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="配件编码" prop="partsNumber"> </el-table-column>
          <el-table-column label="配件名称" prop="partsName"> </el-table-column>
          <el-table-column label="单位" width="120" prop="goodsStockUnit"> </el-table-column>
          <el-table-column label="市场价" width="120" prop="marketPrice"> </el-table-column>
          <el-table-column label="销售价" width="120" prop="salesPrice"> </el-table-column>
          <el-table-column label="优惠价" width="120" prop="secondPrice"> </el-table-column>
          <el-table-column label="数量" width="100" prop="qty"> </el-table-column>
          <el-table-column label="总金额" width="100" prop="totalAmount"> </el-table-column>
        </el-table>
      </div>
      <div style="margin-bottom: 10px; width: 100%">
        <el-table :data="payOrder" size="mini" border header-cell-class-name="headerRowColor" style="width: 100%">
          <el-table-column prop="outTradeNo" label="商户订单号" width="235" />
          <el-table-column prop="orderNo" label="商户单号" width="150" />
          <el-table-column prop="payFlag" label="支付状态" width="80">
            <template slot-scope="scope">
              {{ { NO: '否', YES: '是' }[scope.row.payFlag] }}
            </template>
          </el-table-column>
          <el-table-column prop="payValue" label="支付金额" width="80" />
          <el-table-column prop="createTime" label="生成时间" width="140" />
          <el-table-column prop="timeExpire" label="失效时间" width="140" />
          <el-table-column prop="mchNo" label="商户号" width="150" />
          <el-table-column prop="openid" label="支付账号" show-overflow-tooltip />
          <el-table-column prop="transactionId" label="微信流水号" show-overflow-tooltip />
        </el-table>
      </div>
      <div style="text-align: right" v-if="formData && !formData.creditStatus">
        <el-button size="small" type="primary" @click="shoukuan">收款</el-button>
      </div>
    </div>
    <pay-popup-window
      v-if="visible"
      :item="rowData"
      :visible="visible"
      @success="
        () => {
          $refs.pageRef.refreshList()
        }
      "
      @setVisible="
        bool => {
          visible = bool
          rowData = null
          getxiangqing()
        }
      "
    />
  </div>
</template>

<script>
import PayPopupWindow from './pay-popup-window.vue'
import { ppartsCreditDetail } from '@/api/masterAccountingManagement'
export default {
  components: { PayPopupWindow },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      rowData: null,
      formData: null
    }
  },
  computed: {
    items() {
      return this?.formData?.item ? [this?.formData?.item] : []
    },
    payOrder() {
      return this?.formData?.payOrder ? [this?.formData?.payOrder] : []
    }
  },
  mounted() {
    this.getxiangqing()
  },
  methods: {
    getxiangqing() {
      ppartsCreditDetail({ id: this.item.id }).then(res => {
        this.formData = res.data
      })
    },
    shoukuan() {
      this.rowData = this.formData
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.website-parts-shop-sales {
  min-width: 860px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  overflow: hidden;
  .website-parts-shop-sales-sl {
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .sizeinput {
    width: 100%;
    height: 100%;
    position: relative;
    .inputjh {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ::v-deep .el-input {
        margin: 0 5px;
        &:first-child {
          margin-left: 0 !important;
        }
        &:last-child {
          margin-right: 0 !important;
        }
      }
    }
  }
  .serial_number {
    width: 100%;
    height: 100%;
    padding: 6px !important;
    text-align: center;
  }
  .caozuo {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ::v-deep .is-disabled {
    .el-textarea__inner,
    .el-input__inner {
      background-color: #fff;
      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: 36px !important;
      border: none !important;
    }
  }
  ::v-deep .cell {
    height: 100%;
    padding: 0 !important;
  }
  ::v-deep .labelClassName {
    width: 6% !important;
  }
  ::v-deep .contentClassName {
    width: 19% !important;
  }
  ::v-deep .labelClassName2 {
    width: 6% !important;
  }
  ::v-deep .contentClassNam2 {
    width: 44% !important;
  }

  ::v-deep .headerRowColor {
    .cell {
      height: 100%;
      padding: 6px !important;
    }
  }
}
</style>