Cloudpods/frontend/containers/Network/views/lb/create/form/mixin.js

import { mapGetters } from 'vuex'
import * as R from 'ramda'
import _ from 'lodash'
import DomainProject from '@/sections/DomainProject'
import { isRequired } from '@/utils/validate'
import CloudproviderRegionZone from '@/sections/CloudproviderRegionZone'
import i18n from '@/locales'
import Tag from '@/sections/Tag'

export default {
  components: {
    DomainProject,
    CloudproviderRegionZone,
    Tag,
  },
  props: {
    type: String,
  },
  data () {
    return {
      domain: {},
      project: {},
      vpcObj: {},
      networkObj: {},
      form: {
        fc: this.$form.createForm(this, { onValuesChange: this.onValuesChange }),
        fd: {
          address_type: 'internet',
          charge_type: 'traffic',
          bandwidth: 1,
          ip: 'ipv4',
        },
      },
      formItemLayout: {
        wrapperCol: {
          span: 20,
        },
        labelCol: {
          span: 4,
        },
      },
      decorators: {
        domain: [
          'domain',
          {
            initialValue: this.$store.getters.userInfo.projectDomainId,
            rules: [
              { required: true, message: this.$t('rules.domain'), trigger: 'change' },
            ],
          },
        ],
        project: [
          'project',
          {
            initialValue: this.$store.getters.userInfo.projectId,
            rules: [
              { required: true, message: this.$t('rules.project'), trigger: 'change' },
            ],
          },
        ],
        name: [
          'name',
          {
            validateFirst: true,
            rules: [
              { required: true, message: i18n.t('network.text_116') },
              { validator: this.$validate('resourceName') },
            ],
          },
        ],
        description: ['description'],
        cluster_id: [
          'cluster_id',
          {
            rules: [
              { required: true, message: i18n.t('network.text_79'), trigger: 'change' },
            ],
          },
        ],
        vpc: [
          'vpc',
          {
            rules: [
              { required: true, message: i18n.t('network.text_274'), trigger: 'change' },
            ],
          },
        ],
        network: [
          'network',
          {
            rules: [
              { required: true, message: i18n.t('network.text_284'), trigger: 'change' },
            ],
          },
        ],
        manager: [
          'manager',
          {
            // initialValue: { key: '', label: '' },
            rules: [
              { required: true, message: i18n.t('network.text_285') },
            ],
          },
        ],
        cloudregion: [
          'cloudregion',
          {
            initialValue: { key: '', label: '' },
            rules: [
              { validator: isRequired(), message: i18n.t('network.text_286') },
            ],
          },
        ],
        zone: [
          'zone',
          {
            initialValue: { key: '', label: '' },
            rules: [
              { validator: isRequired(), message: i18n.t('scope.text_65') },
            ],
          },
        ],
        loadbalancer_spec: [
          'loadbalancer_spec',
          {
            rules: [
              { required: true, message: i18n.t('network.text_269') },
            ],
          },
        ],
        instance_type: [
          'instance_type',
          {
            initialValue: 'application',
            rules: [
              { required: true, message: i18n.t('network.text_269') },
            ],
          },
        ],
        address_type: [
          'address_type',
          {
            initialValue: 'internet',
          },
        ],
        chargeType: [
          'charge_type',
          {
            initialValue: 'traffic',
          },
        ],
        bandwidth: [
          'bandwidth',
          {
            initialValue: 1,
            rules: [
              { required: true, message: i18n.t('network.text_288'), trigger: 'change', type: 'number' },
            ],
          },
        ],
        ip: [
          'ip',
          {
            initialValue: 'ipv4',
          },
        ],
        eip: {
          type: [
            'eip_type',
            {
              initialValue: 'none',
            },
          ],
          charge_type: [
            'eip_charge_type',
          ],
          bgp_type: [
            'eip_bgp_type',
            {
              initialValue: '',
            },
          ],
          bandwidth: [
            'eip_bw',
            {
              initialValue: 30,
            },
          ],
          eip: [
            'eip',
            {
              rules: [
                { required: true, message: i18n.t('network.text_278') },
              ],
            },
          ],
        },
        __meta__: [
          '__meta__',
          {
            rules: [
              { validator: this.$validate('tagName') },
            ],
          },
        ],
      },
    }
  },
  provide () {
    return {
      form: this.form,
    }
  },
  computed: {
    ...mapGetters(['isAdminMode', 'scope', 'isDomainMode', 'userInfo', 'l3PermissionEnable']),
    project () {
      return this.form.fd.project ? this.form.fd.project : this.$store.getters.userInfo.projectId
    },
    provider () {
      if (this.form.fd.provider) {
        return this.form.fd.provider.toLocaleLowerCase()
      }
      return null
    },
    isAliyun () {
      return this.provider === 'aliyun'
    },
    isAws () {
      return this.provider === 'aws'
    },
    isHuawei () {
      return this.provider === 'huawei'
    },
    isQcloud () {
      return this.provider === 'qcloud'
    },
    isShowCloudprovider () {
      const { address_type } = this.form.fd
      if (this.isAliyun) {
        return address_type === 'internet'
      }
      return false
    },
    scopeParams () {
      const params = {}
      if (this.isAdminMode) {
        if (!this.l3PermissionEnable) {
          params.project_domain = 'default'
        }
        if (R.is(String, this.domain)) {
          params.project_domain = this.domain
        }
      } else {
        params.scope = this.scope
      }
      return params
    },
    vpcParams () {
      const { cloudregion } = this.form.fd
      if (cloudregion && !R.isEmpty(this.scopeParams)) {
        const params = {
          ...this.scopeParams,
          cloudregion: _.isObject(cloudregion) ? cloudregion.key : cloudregion,
        }
        return params
      }
      return {}
    },
    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.form.fd.zone) params.zone = this.form.fd.zone
      }
      return params
    },
    cloudregionParams () {
      const params = {
        limit: 0,
        capability: undefined,
        cloud_env: this.type,
        ...this.scopeParams,
      }
      if (this.type === 'private') {
        params['filter.0'] = 'provider.in(OpenStack,HCSO,HCS)'
      } else {
        delete params.provider
      }
      return params
    },
    cloudproviderParams () {
      if (R.isEmpty(this.scopeParams)) return {}
      const { provider } = this.form.fd
      const params = {
        limit: 0,
        enabled: true,
        provider,
        status: 'connected',
        cloudregion: this.form.fd.cloudregion,
        ...this.scopeParams,
      }
      return params
    },
    zoneParams () {
      const params = {
        usable: true,
        show_emulated: true,
        order_by: 'created_at',
        order: 'asc',
        limit: 0,
        ...this.scopeParams,
      }
      return params
    },
    cityParams () {
      const params = {
        ...this.scopeParams,
      }
      if (this.type === 'public') params.public_cloud = true
      return params
    },
    areaParams () {
      return {
        cityParams: this.cityParams,
        providerParams: this.scopeParams,
        cloudregionParams: this.cloudregionParams,
        zoneParams: this.zoneParams,
        isRequired: true,
        ...this.formItemLayout,
        event: {
          providerFetchSuccess: (list) => {
            return list
          },
        },
      }
    },
  },
  methods: {
    vpcLabelFormat (item) {
      if (!item.cidr_block) return item.name
      return `${item.name}（${item.account ? item.account + ', ' : ''}${item.cidr_block}）`
    },
    vpcFormatter (v) {
      return {
        key: v.id,
        label: this.vpcLabelFormat(v),
        rightLabel: v.manager ? this.$t('network.manager', [v.manager]) : '',
        disabled: v.network_count === 0,
        ...v,
      }
    },
    handleVpcChange (data) {
      this.vpcObj = data[0] ? data[0] : {}
    },
    validateIp () {
      const remainIps = this.networkObj.ports - this.networkObj.ports_used
      if (remainIps && remainIps < 8) {
        this.$message.warning(i18n.t('network.text_276'))
        return false
      }
      return true
    },
    onValuesChange (props, values) {
      R.forEachObjIndexed((value, key) => {
        this.$set(this.form.fd, key, value)
      }, values)
    },
  },
}