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

<template>
  <div class="create-order-content-container">
    <ModuleCard class="create-order-module" title="基本信息">
      <BaseInfo ref="moduleBaseInfo" />
    </ModuleCard>
    <ModuleCard class="create-order-module" title="产品信息">
      <ProductInfoModule ref="moduleProductInfo" />
    </ModuleCard>
    <ModuleCard class="create-order-module" title="协议信息">
      <ContractInfoModule ref="moduleContractInfo" />
    </ModuleCard>
    <!-- 合同金额为0，则不展示回款计划模块 -->
    <ModuleCard class="create-order-module" title="回款计划" v-if="totalMoney > 0">
      <PaymentPlanModule ref="modulePaymentPlan" :totalMoney="totalMoney" :contractStatus="pageForm.agreeStatus" />
    </ModuleCard>
    <ModuleCard class="create-order-module" title="业绩归属">
      <PerformanceBelongsModule ref="modulePerformanceBelong" setDefaultUser />
    </ModuleCard>
    <ModuleCard class="create-order-module" title="其他信息">
      <OtherInfoModule ref="moduleOtherInfo" />
    </ModuleCard>
  </div>
</template>

<script>
import ModuleCard from '../ui/ModuleCard.vue'
import BaseInfo from './baseInfoModule.vue'
import PaymentPlanModule from './paymentPlanModule.vue'
import ProductInfoModule from './productInfoModule.vue'
import PerformanceBelongsModule from './performanceBelongsModule.vue'
import OtherInfoModule from './otherInfoModule.vue'
import ContractInfoModule from './contractInfoModule.vue'
import { mapState } from 'vuex'

export default {
  name: 'CreateOrderContent',
  components: {
    ModuleCard,
    BaseInfo,
    PaymentPlanModule,
    ProductInfoModule,
    OtherInfoModule,
    PerformanceBelongsModule,
    ContractInfoModule,
  },
  data() {
    return {
      totalMoney: 1
    }
  },
  computed: {
    ...mapState({
      pageForm: state => state.order.pageForm,
    }),
  },
  created() {
    this.$store.dispatch('order/getSelectOptions')
  },
  methods: {
    async validate() {
      const refsArr = this.getFormRefs()
      const asyncArr = refsArr.map(r => r?.validate())
      const allPromise = Promise.all(asyncArr)
      try {
        await allPromise
        console.log('success')
      } catch (error) {
        console.log('error', error)
      } finally {
        console.log('finally', allPromise)
      }
    },
    getFormRefs() {
      const refs = this.$refs
      const refsArr = []
      for (const key in refs) {
        if (key.startsWith('module')) {
          refsArr.push(refs[key])
        }
      }
      return refsArr
    },
    getState() {
      const refsArr = this.getFormRefs()
      const result = {}
      refsArr.forEach(r => {
        const t = r?.getState()
        Object.assign(result, t)
      })
      return result
    },
    setState() {
      const refsArr = this.getFormRefs()
      console.log('setState', refsArr)
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    margin-bottom: 12px;
  }
  .el-form-item__label {
    color: #686868;
  }
  .el-form-item__error {
    padding-top: 0;
  }

  .el-select-w100.el-select {
    width: 100%;
  }
}
.create-order-content-container {
  padding-top: 20px;
}
.create-order-module {
  font-size: 14px;
}
</style>