fashion-ssr-vue3/components/business/register/stepTwo.vue

<!-- @format -->

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { useRegister } from '~/pages/register/useRegister'
import { getCategoryListApi, getDictListApi } from '~/api/model/common'

const { params, nextStep } = useRegister()

const countryList = ref()
const categoryList = ref()
const businessTypesList = ref()
const annualPurchaseAmountList = ref()
const companySizeList = ref()

const ruleFormRef = ref<FormInstance>()
const rules = ref<FormRules>({
  country: [
    {
      required: true,
      message: 'Country must be selected',
      trigger: 'change',
    },
  ],
  companyName: [
    {
      required: true,
      message: 'CompanyName must be filled in',
      trigger: 'blur',
    },
  ],
  purchaseCategory: [
    {
      required: true,
      message: 'Category must be selected',
      trigger: 'change',
    },
  ],
  companyType: [
    {
      required: true,
      message: 'CompanyType must be selected',
      trigger: 'change',
    },
  ],
  annualPurchaseAmount: [
    {
      required: true,
      message: 'AnnualPurchaseAmount must be selected',
      trigger: 'change',
    },
  ],
  companySize: [
    {
      required: true,
      message: 'CompanySize must be selected',
      trigger: 'blur',
    },
  ],

})
async function getCountryList() {
  const list = await getDictListApi('A070')
  countryList.value = list
}
async function getBusinessTypesList() {
  const list = await getDictListApi('A071')
  businessTypesList.value = list
}
async function getAnnualPurchaseAmountList() {
  const list = await getDictListApi('A072')
  annualPurchaseAmountList.value = list
}
async function getCompanySizeList() {
  const list = await getDictListApi('A167')
  companySizeList.value = list
}
async function getCategoryList() {
  const list = await getCategoryListApi({
    all: false,
  })
  categoryList.value = list
}

async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid)
      nextStep()
    else
      console.log('error submit!', fields)
  })
}
getCountryList()
getCategoryList()
getCompanySizeList()
getBusinessTypesList()
getAnnualPurchaseAmountList()
</script>

<template>
  <div>
    <div class="fw-500 mb-24px text-40px text-#000">
      Company
    </div>
    <el-form
      ref="ruleFormRef"
      :model="params"
      :rules="rules"
      label-width="auto"
      size="default"
      status-icon
    >
      <el-form-item label="Country" prop="country" class="custom-form-item">
        <el-select v-model="params.country" placeholder="Country" filterable>
          <el-option
            v-for="(item, index) in countryList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="Company Name"
        class="custom-form-item"
        prop="companyName"
      >
        <el-input
          v-model="params.companyName"
          placeholder="Company name"
          class="h-50px"
        />
      </el-form-item>

      <el-form-item
        label="Category"
        prop="purchaseCategory"
        class="custom-form-item"
      >
        <el-select v-model="params.purchaseCategory" placeholder="Category" multiple>
          <el-option
            v-for="(item, index) in categoryList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.title"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="Business Types"
        prop="companyType"
        class="custom-form-item"
      >
        <el-select v-model="params.companyType" placeholder="Business Types">
          <el-option
            v-for="(item, index) in businessTypesList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="Annual sourcing budget"
        prop="annualPurchaseAmount"
        class="custom-form-item"
      >
        <el-select
          v-model="params.annualPurchaseAmount"
          placeholder="Annual sourcing budget"
        >
          <el-option
            v-for="(item, index) in annualPurchaseAmountList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="company size"
        prop="companySize"
        class="custom-form-item"
      >
        <el-select
          v-model="params.companySize"
          placeholder="company size"
        >
          <el-option
            v-for="(item, index) in companySizeList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="Website" class="custom-form-item">
        <el-input
          v-model="params.website"
          placeholder="website"
          class="h-50px"
        />
      </el-form-item>
      <el-form-item class="form-footer mt-50px">
        <!-- <el-button
          class="!bg-#fff !text-#5B463E !w-48% !h-50px !text-18px !fw-500 !b-rd-6px b-#5B463E"
          @click="backStep"
        >
          Back
        </el-button>
        <el-button
          class="!bg-#C58C64 !text-#fff !ml-0 !w-48% !h-50px !text-18px !fw-500 !b-rd-6px"
          @click="submitForm(ruleFormRef)"
        >
          Next
        </el-button> -->
        <el-button class="!bg-#C58C64 !text-#fff !w-full !h-50px !text-16px !fw-500 !b-rd-6px " @click="submitForm(ruleFormRef)">
          Next
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
:deep(.custom-form-item) {
  width: 100%;
  margin-bottom: 22px;
  display: block !important;
  .el-select__wrapper {
    height: 50px !important;
  }
  .el-form-item__label-wrap {
    margin-left: unset !important;
    .el-form-item__label {
      margin-bottom: 5px;
      font-size: 16px !important;
      color: #5b463e !important;
    }
  }

  .el-checkbox {
    .el-checkbox__input {
        &.is-checked {
            .el-checkbox__inner {
                color: #CC9879 !important;
                background-color: #CC9879 !important;
                border: 1px solid #CC9879 !important;
            }
        }

        .el-checkbox__inner {
            &:hover {
                border-color: #CC9879 !important;
            }
        }
    }

    &.is-checked {
        .el-checkbox__label {
            color: #CC9879 !important;
        }
    }
}
}
::v-deep(.form-footer) {
  .el-form-item__content {
    display: flex;
    justify-content: space-between;
  }
}
</style>