Cloudpods/frontend/containers/Network/views/lb/create/form/IDC.vue

<template>
  <a-form :form="form.fc"  class="mt-3" v-bind="formItemLayout">
    <a-form-item :label="$t('network.text_205', [$t('dictionary.project')])" class="mb-0">
      <domain-project :fc="form.fc" :decorators="decorators" :domain.sync="domain" :project.sync="project" :labelInValue="false" />
    </a-form-item>
    <a-form-item :label="$t('network.text_199')" class="mb-0">
      <cloudregion-zone
      :decorator="decorators"
      :cloudregionParams="cloudregionParams"
      :zoneParams="zoneParams"
      :zone.sync="zoneObj"
      filterBrandResource="loadbalancer_engine" />
    </a-form-item>
    <a-form-item :label="$t('network.text_21')">
      <a-input v-decorator="decorators.name" :placeholder="$t('validator.resourceName')" />
    </a-form-item>
    <a-form-item :label="$t('common.description')">
      <a-textarea :auto-size="{ minRows: 1, maxRows: 3 }" v-decorator="decorators.description" :placeholder="$t('common_367')" />
    </a-form-item>
    <a-form-item :label="$t('compute.text_176')">
      <a-radio-group :defaultValue="hypervisorOpts[0].key">
        <a-radio-button v-for="item in hypervisorOpts" :value="item.key" :key="item.key">{{ item.label }}</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item :label="$t('network.text_19')">
      <base-select
        show-sync
        v-decorator="decorators.cluster_id"
        resource="loadbalancerclusters"
        need-params
        filterable
        :params="clusterParams"
        :select-props="{ placeholder: $t('network.text_79') }" />
      <div slot="extra" v-if="isAdminMode">{{$t('network.text_281')}}<help-link href="/cluster">{{$t('network.text_282')}}</help-link></div>
    </a-form-item>
    <a-form-item :label="$t('network.text_211')">
      <a-row :gutter="8">
        <a-col :span="12">
          <oc-select
            width="100%"
            v-decorator="decorators.vpc"
            show-status
            :status-desc="$t('compute.vpc_status_desc')"
            resource="vpcs"
            label="VPC"
            :formatter="vpcFormatter"
            :params="vpcParams"
            :sort="(arr) => arr.sort((a, b) => a.network_count > b.network_count ? -1 : 1)"
            :placeholder="$t('compute.text_194')" />
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <base-select
              v-decorator="decorators.network"
              resource="networks"
              need-params
              filterable
              isDefaultSelect
              :params="networkParams"
              :item.sync="networkObj"
              :select-props="{ placeholder: $t('network.text_212') }" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form-item>
    <eip-config
      v-if="showEip"
      :decorators="decorators.eip"
      :eip-params="eipParams"
      hypervisor="kvm"
      cloud-env="idc"
      :form="form"
      :formItemLayout="formItemLayout" />
    <a-form-item :label="$t('table.title.tag')">
      <tag v-decorator="decorators.__meta__" :allowNoValue="false" />
    </a-form-item>
  </a-form>
</template>

<script>
import * as R from 'ramda'
import _ from 'lodash'
import { mapGetters } from 'vuex'
import CloudregionZone from '@/sections/CloudregionZone'
import EipConfig from '@Compute/sections/EipConfig'
import { HYPERVISORS_MAP } from '@/constants'
import lbCreate from './mixin'

export default {
  name: 'LbOnecloudCreate',
  components: {
    CloudregionZone,
    EipConfig,
  },
  mixins: [lbCreate],
  provide () {
    return {
      form: this.form,
    }
  },
  data () {
    return {
      zoneObj: {},
      hadVpc: false,
    }
  },
  computed: {
    ...mapGetters(['isAdminMode']),
    clusterParams () {
      let params = {}
      if (this.zoneObj && this.zoneObj.id && !R.isEmpty(this.scopeParams)) {
        params.zone = this.zoneObj.id
        params.limit = 0
        params = Object.assign(params, this.scopeParams)
      }
      return params
    },
    networkParams () {
      let params = {}
      if (this.form.fd.vpc && !R.isEmpty(this.scopeParams)) {
        params = { ...this.scopeParams, usable: true }
        params.limit = 0
        params.vpc = this.form.fd.vpc
        if (this.zoneObj && this.zoneObj.id) params.zone = this.zoneObj.id
      }
      return params
    },
    cloudregionParams () { // 覆盖 mixin
      return {
        scope: this.$store.getters.scope,
        usable: true,
        is_on_premise: true,
      }
    },
    // 当前只支持oneCloud
    hypervisorOpts () {
      return [HYPERVISORS_MAP.kvm]
    },
    eipParams () {
      const cloudregion = _.get(this.form.fd, 'cloudregion.key')
      if (!cloudregion) return {}
      return {
        project: this.project,
        region: cloudregion,
      }
    },
    showEip () {
      const { vpc } = this.form.fd
      if (!vpc || vpc === 'default') {
        return false
      }
      return true
    },
  },
  methods: {
    async submit () {
      try {
        const values = await this.form.fc.validateFields()
        const data = {
          cluster_id: values.cluster_id,
          name: values.name.trim(),
          description: values.description,
          vpc: values.vpc,
          network: values.network,
          domain: values.domain,
          project: values.project,
          __meta__: values.__meta__,
        }
        if (values.eip_type === 'new') {
          data.eip_bgp_type = values.eip_bgp_type
          data.eip_bw = values.eip_bw
          data.eip_charge_type = values.eip_charge_type
        } else if (values.eip_type === 'bind') {
          data.eip = values.eip
          data.address_type = 'internet'
        }
        return data
      } catch (error) {
        throw error
      }
    },
  },
}
</script>