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

<template>
  <div class="product-info-card" v-loading="loading">
    <el-form label-width="126px">
      <el-row :gutter="2">
        <el-col :span="24">
          <ProductTypeSelector
            :productTypeOptions="productTypeOptions2"
            :showErrorTip="showErrorTip"
            :value="productTypeResult"
            :loading="loading"
            :showLoading="true"
            @input="onProductionInput"
            @change="onProductionChange"
          />
        </el-col>
      </el-row>
      <el-collapse-transition>
        <el-row :gutter="2" v-if="productTypeResult && productTypeResult.productCode">
          <el-col :span="24">
            <ProductSchemaForm
              :productType="productTypeResult.productCode"
              :productInfo="productTypeInfo"
              :value="productForm"
              :index="index"
              :readonly="readonly"
              @input="onSchemaFormChange"
              @loading="changeLoading"
            />
          </el-col>
        </el-row>
      </el-collapse-transition>
    </el-form>
  </div>
</template>

<script>
import ProductTypeSelector from './product-info-submodule/ProductTypeSelector.vue'
import ProductSchemaForm from './schema-form/schema-form.vue'
import { mapState } from 'vuex'
import { cloneDeep } from 'lodash'

export default {
  name: 'ProductInfoCard',
  components: {
    ProductTypeSelector,
    ProductSchemaForm,
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    index: {
      type: [String, Number],
      default: '0'
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      // productTypeResult: {
      //   productCode: '',
      //   activityCode: '',
      // },
      // productTypeInfo: {},
      // form: {}
    }
  },
  computed: {
    ...mapState({
      productTypeOptions: state => state.order.productList,
      productInfoList: state => state.order.orderInfo.productInfoList,
      pageForm: state => state.order.pageForm,
    }),
    productTypeOptions2() {
      if (this.index <= 0) {
        // 过滤：产品1(索引是0的产品)隐藏那些只能赠送的选项
        const productList = cloneDeep(this.productTypeOptions)
        productList.forEach(p1 => {
          if (Array.isArray(p1.children) && p1.children.length > 0) {
            // 排除仅赠送的
            p1.children = p1.children.filter(p2 => p2.tactics !== 2)
          }
        })
        return productList.filter(t => t.children.length > 0)
      } else {
        return this.productTypeOptions
      }
    },
    productInfoListItem() {
      return this.productInfoList[this.index]?.productCardInfo || {}
    },
    productTypeInfo(){
      return this.productInfoListItem.info || {}
    },
    productForm() {
      return this.productInfoListItem.form || {}
    },
    productTypeResult() {
      return this.productInfoListItem.result || {
        productCode: '',
        activityCode: '',
      }
    },
    showErrorTip() {
      return this.pageForm.buySubject === 1
    },
  },
  methods: {
    onProductionChange(e) {
      // this.productTypeInfo = e.info
      const p = {
        key: 'info',
        data: e.info,
        index: this.index,
      }
      this.$store.commit('order/refreshOrderProductItemCardForm', p)
      this.onChange()
    },
    onProductionInput(e) {
      const p = {
        key: 'result',
        data: e,
        index: this.index,
      }
      this.$store.commit('order/refreshOrderProductItemCardForm', p)
    },
    onSchemaFormChange(e) {
      const p = {
        key: 'form',
        data: e,
        index: this.index,
      }
      this.$store.commit('order/refreshOrderProductItemCardForm', p)
      this.onChange()
    },
    getState() {
      const p = {
        result: this.productTypeResult,
        info: this.productTypeInfo,
        form: this.form,
      }
      return JSON.parse(JSON.stringify(p))
    },
    onChange() {
      const payload = this.getState()
      this.$emit('change', payload)
    },
    changeLoading(e) {
      this.loading = e
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .product-type-cascader {
    width: 90%;
  }
}
</style>