qmx_page_admin/src/views/create-order/components/productInfoModule.vue

<template>
  <!-- 产品信息 -->
  <div class="order-product-info-container">
    <div class="product-info-content">
      <ProductInfoCardList :readonly="readonly" ref="productionInfoCardList" />
    </div>
    <div class="product-info-footer">
      <el-form ref="form" :model="form" :rules="rules" label-width="126px" class="order-base-info-container">
        <div class="desc-detail-info-list">
          <div class="desc-detail-info-item form-item-container">
            <div class="desc-label form-item-label">合同金额合计：</div>
            <div class="desc-value form-item-value">{{ formatMoney(pageTotalMoney.contract) }}</div>
          </div>
          <div class="desc-detail-info-item form-item-container">
            <div class="desc-label form-item-label">标准售价合计：</div>
            <div class="desc-value form-item-value">
              <span v-if="pageTotalMoney.standard < 0" class="color-light-orange">无法计算</span>
              <template v-else>
                {{ formatMoney(pageTotalMoney.standard) }}
              </template>
            </div>
          </div>
          <div class="desc-detail-info-item form-item-container">
            <div class="desc-label form-item-label">折扣率：</div>
            <div class="desc-value form-item-value">
              <span v-if="pageTotalMoney.rate < 0" class="color-light-orange">无法计算</span>
              <template v-else>
                {{ pageTotalMoney.rate }}
              </template>
            </div>
          </div>
        </div>
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="渠道佣金" prop="channelCommission" :required="required.channelCommission">
              <number-input
                :value="channelCommission"
                @input="onChannelCommissionChange"
                placeholder="请填写渠道佣金"
                :decimal="2"
              >
                <template #append>元</template>
              </number-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="0元订单类型"
          prop="orderMoney0Type"
          v-if="orderMoney0TypeShow"
          :required="required.orderMoney0Type"
        >
          <RadioGroup
            v-model="pageForm.orderMoney0Type"
            @input="setPageFormData('orderMoney0Type', $event)"
            :options="conf.orderMoney0TypeOptions"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ProductInfoCardList from './ProductInfoCardList.vue'
import NumberInput from '@/views/create-order/ui/NumberInput.vue'
import { orderMoney0TypeOptions } from '@/views/create-order/data/index.js'
import { currencyFormat } from '@/utils/str'
import RadioGroup from '@/views/create-order/components/product-info-submodule/RadioGroup'
import { mapState, mapGetters } from 'vuex'
import { pageFormState } from '@/views/create-order/mixins'
import { showMessage } from '@/views/create-order/hooks/toast'

export default {
  name: 'ProductInfoModule',
  mixins: [pageFormState],
  components: {
    RadioGroup,
    ProductInfoCardList,
    NumberInput
  },
  props: {
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      conf: {
        orderMoney0TypeOptions,
      },
      required: {
        channelCommission: false,
        orderMoney0Type: true,
      },
      form: {
        channelCommission: '0',
        orderMoney0Type: '1',
      },
    }
  },
  computed: {
    ...mapState({
      pageForm: state => state.order.pageForm,
      channelCommission: state => state.order.pageForm.channelCommission
    }),
    buySubject() {
      return this.pageForm.buySubject
    },
    ...mapGetters('order', ['pageTotalMoney', 'orderMoney0Type']),
    rules() {
      const channelCommissionRequired = this.required.channelCommission

      return {
        channelCommission: [
          { required: channelCommissionRequired, message: '请输入渠道佣金金额', trigger: 'blur' }
        ]
      }
    },
    orderMoney0TypeShow() {
      return this.orderMoney0Type
    },
  },
  watch: {
    buySubject() {
      this.onChannelCommissionChange(0)
    }
  },
  methods: {
    located(val) {
      return currencyFormat(val)
    },
    formatMoney(val) {
      val = val - 0
      if (val && !isNaN(val)) {
        return this.located(val)
      } else {
        return '-'
      }
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    async validateChildren() {
      const card = this.$refs.productionInfoCardList
    },
    onChannelCommissionChange(e) {
      const cTotal = this.pageTotalMoney.contract
      if (e > cTotal) {
        showMessage('渠道佣金不可大于合同金额总计')
        this.setPageFormData('channelCommission', '')
      } else {
        this.setPageFormData('channelCommission', e)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input-group__append {
    background: transparent;
    border: none;
    color: $gray_10;
  }
}
.color-light-orange {
  color: $red_light;
}
.desc-detail-info-list,
.desc-detail-info-item {
  display: flex;
  align-items: center;
}
.desc-detail-info-list {
  margin-bottom: 12px;
}
.desc-detail-info-item {
  margin-right: 30px;
  .desc-label {
    color: #686868;
  }
}
</style>